import { useState } from 'react'
import WeUI from 'react-weui'  // react 组件框架

const {
    MediaBox,
    MediaBoxHeader,
    MediaBoxBody,
    MediaBoxTitle,
    MediaBoxDescription
} = WeUI

function List(props) {
    const {data} = props;
    return (
        data.map(book => <Book key={book.id} info={book}/>)
    )
}
function Book(props) {
    // props 非自有， 传入
    const {info} = props;
    console.log(info)
  return (
      <MediaBox type="appmsg">
          <MediaBoxHeader>
              <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.rEBI1rTA7NUUbaS3inzFBAHaLH?w=186&h=279&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="" />
          </MediaBoxHeader>
          <MediaBoxBody>
            <MediaBoxTitle>{info.title}</MediaBoxTitle>
            <MediaBoxDescription>{info.des}</MediaBoxDescription>
          </MediaBoxBody>
      </MediaBox>
    // <div>
    //     <div>
    //         {
    //             data.map(book => <div key={book.id}> {book.title}-{book.des} </div>)
    //         }
    //     </div>
    // </div>
  )
}

export default List
